<template>
  <scroll-view scroll-y class="container">
    <view class="header">
      <view class="info" @tap="memberStore.profile ? null : login()">
        <image
          class="info-image"
          :src="userInfo.avatar"
          mode="aspectFill"
          @tap="memberStore.profile ? null : login()"
        ></image>

        <view class="info-name" v-if="memberStore.profile">{{
          userInfo.nickname
        }}</view>
        <view class="info-name" v-else @tap.prevent="login()">点击登录</view>

        <navigator
          :url="'/pagesMember/mySpace/mySpace?userId=' + userInfo.user_id"
          open-type="navigate"
          hover-class="none"
          class="space"
          v-if="memberStore.profile"
        >
          <uni-icons type="gear-filled" color="#555" size="36" />
        </navigator>
      </view>

      <view class="header-bar">
        <navigator
          :url="
            '/pagesMember/myCollection/myCollection?userId=' + userInfo.user_id
          "
          open-type="navigate"
          class="header-bar-collection"
          hover-class="none"
        >
          <uni-icons
            type="star-filled"
            color="#d66200"
            size="80rpx"
          />我的收藏 </navigator
        ><navigator
          :url="'/pagesMember/myComment/myComment?userId=' + userInfo.user_id"
          open-type="navigate"
          hover-class="none"
          class="header-bar-comment"
          ><uni-icons
            type="chatboxes-filled"
            color="#d66200"
            size="80rpx"
          />我的评论</navigator
        >
      </view>
    </view>
    <view class="content">
      <uni-list>
        <uni-list-item
          link="navigateTo"
          to="/pagesMember/recommendData/recommendData"
          showExtraIcon
          :extraIcon="{ color: '#d66200', size: '22', type: 'hand-up-filled' }"
          showArrow
          title="我来推荐"
        />
        <uni-list-item
          link="navigateTo"
          to="/pagesMember/helpCenter/helpCenter"
          showExtraIcon
          :extraIcon="{ color: '#d66200', size: '22', type: 'help-filled' }"
          showArrow
          title="帮助中心"
        />
        <uni-list-item
          link="navigateTo"
          to="/pagesMember/myFeedback/myFeedback"
          showExtraIcon
          :extraIcon="{ color: '#d66200', size: '22', type: 'email-filled' }"
          showArrow
          title="意见反馈"
        />
        <uni-list-item
          link="navigateTo"
          to="/pagesMember/aboutUs/aboutUs"
          showExtraIcon
          :extraIcon="{ color: '#d66200', size: '22', type: 'info-filled' }"
          showArrow
          title="关于我们"
        />
      </uni-list>
    </view>
    <view class="login-mask" v-show="loginMask"
      ><view class="toast"
        ><uni-icons
          type="loop"
          color="#fff"
          size="48"
          class="loop"
        />正在登录中……</view
      ></view
    >
  </scroll-view>
</template>

<script lang="ts" setup>
import { loginAPI, getUserInfoAPI } from "@/services/index";
import { ref, onMounted } from "vue";
import { useMemberStore } from "@/stores/modules/member";

const memberStore = useMemberStore();
let userInfo = ref({
  avatar: "https://www.kimhiz.asia/uploads/Avatar-default.jpg",
  nickname: "",
  user_id: "",
});
onMounted(() => {
  if (memberStore.profile) {
    userInfo.value = memberStore.profile;
    getNewUserInfo(memberStore.profile.user_id);
  } else {
    userInfo.value = {
      avatar: "https://www.kimhiz.asia/uploads/Avatar-default.jpg",
      nickname: "",
      user_id: "",
    };
  }
});
let loginMask = ref(false);
// #ifdef MP-WEIXIN
let login = () => {
  loginMask.value = true;
  uni.getUserProfile({
    desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: async function (res) {
      if (res.errMsg === "getUserProfile:ok") {
        uni.getProvider({
          service: "oauth",
          success: function (pro: any) {
            uni.login({
              provider: pro.provider[0],
              success: async function (loginRes: any) {
                let params = {
                  iv: res.iv,
                  encryptedData: res.encryptedData,
                  rawData: res.rawData,
                  code: loginRes.code,
                };
                let result: any = await loginAPI(params);
                if (result.code == 200) {
                  userInfo.value = result.data.userInfo;
                  memberStore.setProfile(result.data.userInfo);
                  loginMask.value = false;
                } else {
                  loginMask.value = false;
                  uni.showToast({
                    title: "登录失败",
                    icon: "none",
                  });
                }
              },
            });
          },
        });
      }
    },
  });
};
// #endif
// #ifdef H5
login = () => {
  loginMask.value = true;
  // uni.getUserProfile({
  //   desc: "用于完善用户资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  //   success: async function (res) {
  //     if (res.errMsg === "getUserProfile:ok") {
  //       uni.getProvider({
  //         service: "oauth",
  //         success: function (pro: any) {
  //           uni.login({
  //             provider: pro.provider[0],
  //             success: async function (loginRes: any) {
  //               let params = {
  //                 iv: res.iv,
  //                 encryptedData: res.encryptedData,
  //                 rawData: res.rawData,
  //                 code: loginRes.code,
  //               };
  //               let result: any = await loginAPI(params);
  //               if (result.code == 200) {
  //                 userInfo.value = result.data.userInfo;
  //                 memberStore.setProfile(result.data.userInfo);
  //                 loginMask.value = false;
  //               } else {
  //                 loginMask.value = false;
  //                 uni.showToast({
  //                   title: "登录失败",
  //                   icon: "none",
  //                 });
  //               }
  //             },
  //           });
  //         },
  //       });
  //     }
  //   },
  // });
  console.log(111);
};
// #endif
const getNewUserInfo = async (userId: string) => {
  let result: any = await getUserInfoAPI(userId);
  if (result.code == 200) {
    memberStore.clearProfile();
    memberStore.setProfile(result.data);
    userInfo.value = memberStore.profile;
  } else {
    uni.showToast({
      title: "获取用户信息失败",
      icon: "none",
    });
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;
  .header {
    height: 275rpx;
    background: url("/static/images/bg1.svg");
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-sizing: border-box;
    position: relative;
    .info {
      display: flex;
      align-items: center;
      padding: 10rpx 50rpx 0 50rpx;
      position: relative;

      .info-image {
        width: 130rpx;
        height: 130rpx;
        border-radius: 25%;
        border: 6rpx solid #fff;
      }
      .info-name {
        position: absolute;
        top: 5%;
        left: 190rpx;
        display: inline-block;
        color: #333;
        font-size: 35rpx;
        font-weight: bold;
        margin-left: 20rpx;
      }
      .space {
        position: absolute;
        right: 5%;
        width: 80rpx;
      }
    }

    .header-bar {
      position: absolute;
      bottom: -60rpx;
      left: calc(7.5%);
      height: 150rpx;
      width: 85%;
      background-color: white;
      z-index: 100;
      border-radius: 20rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: space-around;
      align-items: center;

      .header-bar-collection,
      .header-bar-comment {
        height: 90%;
        flex: 1;
        font-size: 28rpx;
        color: #333;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .header-bar-collection {
        border-right: 1rpx solid rgba(0, 0, 0, 0.1);
      }
    }
  }

  .content {
    margin-top: 80rpx;
    padding: 0 25rpx;
  }
  .login-mask {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 999;
    .toast {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300rpx;
      height: 300rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 20rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 30rpx;
      .loop {
        animation: loop 1s linear infinite;
      }
      @keyframes loop {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}
</style>
